<template>
	<el-card>
		<!-- 搜索 -->
		<el-form :model="searchData" inline ref="searchFormRef" v-resize="searchResize" label-width="90px">
			<el-form-item label="教师姓名" prop="teacherName">
				<el-input v-model="searchData.teacherName" placeholder="请输入教师姓名" clearable></el-input>
			</el-form-item>
			<el-form-item label="性别" prop="teacherSex">
				<el-select v-model="searchData.teacherSex" clearable>
					<el-option v-for="(item, index) in dict.type.sex" :key="index" :value="item.value"
						:label="item.label"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="电话" prop="teacherPhone">
				<el-input v-model="searchData.teacherPhone" placeholder="请输入电话" clearable></el-input>
			</el-form-item>
			<el-form-item label="幼儿园名称" prop="kgName">
				<el-input v-model="searchData.kgName" placeholder="请输入幼儿园名称" clearable></el-input>
			</el-form-item>
			<el-form-item label="班级名称" prop="className">
				<el-input v-model="searchData.className" placeholder="请输入班级名称" clearable></el-input>
			</el-form-item>
			<el-form-item label="教师职位" prop="teacherPosition">
				<el-input v-model="searchData.teacherPosition" placeholder="请输入教师职位" clearable></el-input>
			</el-form-item>

			<el-form-item style="margin-left: 50px;">
				<el-button icon="el-icon-search" type="primary" @click="searchClick">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="resetClick">重置</el-button>
				<el-button icon="el-icon-plus" type="success" v-has="'sys:teacher:add'" @click="addShowClick">新增</el-button>
			</el-form-item>
		</el-form>

		<!-- 表格渲染 -->
		<YwTable ref="tableRef" :searchData="searchData" :tableProps="tableProps" api="sysTeacherFindAllByPage">
			<el-table-column slot="table_oper" label="操作" fixed="right" width="150px">
				<template v-slot="scope">
						<el-button type="text" icon="el-icon-edit" @click="editShowClick(scope.row)"
							v-has="'sys:teacher:edit'">修改</el-button>
						<el-button type="text" icon="el-icon-delete" @click="deleteClick(scope.row)"
							v-has="'sys:teacher:delByIds'">删除</el-button>
				</template>
			</el-table-column>
		</YwTable>

		<!-- 添加/修改 -->
		<YwDialog @confirm="confirmClick" width="650px" ref="ywDialogRef" title="修改信息">
			<template slot="form">
				<el-form :model="curData" inline ref="curFormRef" label-width="100px" :show-message="false">
				
					<el-form-item label="教师姓名" prop="teacherName" required>
						<el-input v-model="curData.teacherName" placeholder="请输入教师姓名"></el-input>
					</el-form-item>
					<el-form-item label="教师性别" prop="teacherSex">
						<el-radio-group v-model="curData.teacherSex">
							<el-radio v-for="dict in dict.type.sex" :key="dict.value" :label="dict.value">
								{{dict.label}}
							</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="教师电话" prop="teacherPhone" 
					:rules="[
						{ pattern: '^[1][3-9][0-9]{9}$', message: '手机号格式不正确', trigger: ['blur', 'change']}
					]">
						<el-input v-model="curData.teacherPhone" placeholder="请输入教师联系方式"></el-input>
					</el-form-item>
					<el-form-item label="教师职位" prop="teacherPosition">
						<el-input v-model="curData.teacherPosition" placeholder="请输入教师职位"></el-input>
					</el-form-item>
					
					<el-form-item label="幼儿园-班级" prop="classIdList">
						<el-cascader :options="options" 
						:show-all-levels="false" 
						v-model="value1" 
						:props="params" 
						@change="handleChange" clearable filterable></el-cascader>
					</el-form-item>

				</el-form>
			</template>
		</YwDialog>

	</el-card>
</template>

<script>
	export default {
		dicts: ["sex"],
		data() {
			return {
				//搜索条件
				searchData: {
					teacherName: null,
					teacherSex: null,
					teacherPhone: null,
					kgName: null,
					className: null,
					teacherPosition: null,
				},
				//添加信息数据
				//修改信息数据
				//表单的值
				curData: {
					teacherName: null,
					teacherSex: null,
					teacherPhone: null,
					kgId: null,
					teacherPosition: null,
					teacherVxavatar: null,
					teacherVxid: null,
					classIdList: [],
					classId: null
				},
				//表格数据
				tableProps: [{
						label: "教师姓名",
						prop: "teacherName"
					},
					{
						label: "教师性别",
						prop: "teacherSex",
						type: "tagDict",
						result: () => {
							return this.dict.type.sex
						}
					},
					{
						label: "幼儿园名称",
						prop: "kgName"
					},
					{
						label: "班级名称",
						prop: "classNameList",
						type:"tagList"
					},
					{
						label: "教师职位",
						prop: "teacherPosition"
					},
					{
						label: "教师电话",
						prop: "teacherPhone"
					},
					{
						label: "微信头像",
						prop: "teacherVxavatar",
						type: "avatar"
					},
					{
						label: "微信ID",
						prop: "teacherVxid"
					},
					{
						label: "小程序编码",
						prop: "teacherCode"
					}
				],
				//班级列表
				classList: [],
				//获得多级联动中的班级id
				classId: null,

				//多级联动的数据
				value1:[],
				options: [],
				params: {
					label: 'lable',  
					value: 'value',//指定选项的值为选项对象的某个属性值
					children: 'children' //将后端返回的子选项字段children的值 赋值给默认的children
				} 
				
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.$refs.tableRef.shuaxin(this.searchData)
				// this.getKgList();
				this.getClassList();
			})
		},
		methods: {
			//搜索重置
			searchResize(data) {
				this.$refs.tableRef.refreshSize(data)
			},
			//获取多级联动的班级id
			handleChange(value) {
				let classId;
				classId = value[1],
				this.curData.classId = classId;
				let kgId;
				kgId = value[0],
				this.curData.kgId - kgId;
			  },
			//二级联动数据
			getKgClass(){
				this.$api.sysKgClassList().then(data => {
					this.options = data; 
				});
			},

			//获取班级列表
			getClassList() {
				this.$api.sysclassFindAllByList().then(data => {
					this.classList = data;
				});
			},
			//删除事件
			deleteClick(row) {
				this.$common.msgBoxDel(() => {
					this.$api.sysTeacherDelByIds(row.id).then(res => {
						this.searchClick();
					});
				})
			},
			//新增按钮
			addShowClick() {
				this.curData = {
					teacherName: null,
					teacherSex: null,
					teacherPhone: null,
					teacherPosition: null,
					kgId: null,
					classId: null
				}
				this.getKgClass();
				this.$refs.ywDialogRef.open()
			},
			//修改按钮
			editShowClick(row) {
				//获取二级联动数据
				this.getKgClass();
				//给表单赋值
				this.$api.sysTeacherFindById(row.id).then((result) => {
					this.curData = result;//实现表单赋值
					this.value1 = result.kgClass;
				});
				this.$refs.ywDialogRef.open()
			},
			//添加/修改表单的确认按钮
			confirmClick() {
				let data = JSON.parse(JSON.stringify(this.curData))
				console.log("params:"+this.params.label)
				this.$refs.curFormRef.validate(async (valid) => {
					if (valid) {
						if (data.id) {
							//修改操作
							await this.$api.sysTeacherEdit(data)
						} else {
							//添加操作
							await this.$api.sysTeacherAdd(data)
						}
						this.$refs.ywDialogRef.close()
						this.searchClick()
					}
				});
			},
			//搜索按钮
			searchClick() {
				this.$refs.tableRef.shuaxin(this.searchData)
			},
			//重置按钮
			resetClick() {
				this.$refs.searchFormRef.resetFields();
				this.searchClick()
			},
		},
	};
</script>

<style lang="scss" scoped>
</style>
